<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   @click="addAdminDialog()">
          添加用户
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="tableData"
              border
              stripe
              style="width: 100%"
              @sort-change="sortChange">
      <el-table-column prop="id"
                       label="ID"
                       width="100"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="realname"
                       label="真实姓名"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.realname }}
        </template>
      </el-table-column>
      <el-table-column prop="phone"
                       label="手机号码"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column prop="department_id"
                       label="所属部门"
                       min-width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.department.name }}
        </template>
      </el-table-column>
      <el-table-column prop="role_id"
                       label="所属角色"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.role.name }}
        </template>
      </el-table-column>
      <el-table-column prop="level"
                       label="所属级别"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.levelName }}
        </template>
      </el-table-column>
      <el-table-column prop="is_enable"
                       label="状态"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable"
                     active-text="正常"
                     inactive-text="禁用"
                     :active-value="true"
                     :inactive-value="false"
                     @change="setUserStatusSwitch(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="创建时间"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.createdAt }}
        </template>
      </el-table-column>
      <el-table-column prop="updated_at"
                       label="更新时间"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.updatedAt }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="editAdminDialog(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="resetAdminPassword(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加用户"
               width="40%"
               :visible.sync="dialogAddAdminVisible">
      <add-admin ref="addAdmin"
                 style="margin-left:30px;"
                 :department-item="departmentItem"
                 :role-item="roleItem"
                 :level-item="levelItem"
                 :loading="loadingAddAdmin"
                 @submit="addAdminInfo" />
    </el-dialog>

    <el-dialog title="编辑用户"
               width="40%"
               :visible.sync="dialogEditAdminVisible">
      <edit-admin style="margin-left:30px;"
                  :row="row"
                  :department-item="departmentItem"
                  :role-item="roleItem"
                  :level-item="levelItem"
                  :loading="loadingEditAdmin"
                  @submit="editAdminInfo" />
    </el-dialog>
  </div>
</template>

<script>
import { addAdminInfo, updateAdminInfo, updateAdminPassword, enableAdmin } from '@/api/admin'
import AddAdmin from './components/add'
import EditAdmin from './components/edit'
export default {
  components: { AddAdmin, EditAdmin },
  props: {
    tableData: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    },
    departmentItem: {
      default: () => [],
      type: Array
    },
    roleItem: {
      default: () => [],
      type: Array
    },
    levelItem: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      dialogAddAdminVisible: false,
      dialogEditAdminVisible: false,
      loadingAddAdmin: false,
      loadingEditAdmin: false,
      row: { id: null, realname: null, phone: null, departmentId: null, roleId: null, level: null }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    sortChange(sort) {
      this.$emit('change', {
        field: sort.prop,
        rule: sort.order
      })
      this.$emit('submit')
    },
    addAdminDialog() {
      this.dialogAddAdminVisible = true
      this.$nextTick(() => {
        this.$refs.addAdmin.handleFormReset()
      })
    },
    editAdminDialog(row) {
      this.dialogEditAdminVisible = true
      const { id, realname, phone, departmentId, roleId, level } = row
      this.row = { id, realname, phone, departmentId, roleId, level }
    },
    setUserStatusSwitch(row) {
      enableAdmin({
        id: row.id,
        phone: row.phone,
        enable: row.enable
      }).then(res => {
        this.$message({
          message: '设置成功',
          type: 'success',
          duration: 3 * 1000
        })
      })
    },
    addAdminInfo(form) {
      this.loadingAddAdmin = true
      addAdminInfo(form).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingAddAdmin = false
        this.dialogAddAdminVisible = false
      }).catch(err => {
        this.loadingAddAdmin = false
      })
    },
    editAdminInfo(form) {
      this.loadingEditAdmin = true
      updateAdminInfo(form).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingEditAdmin = false
        this.dialogEditAdminVisible = false
      }).catch(err => {
        this.loadingEditAdmin = false
      })
    },
    resetAdminPassword(row) {
      this.$confirm('您将重置' + row.realname + '帐号' + row.phone + '密码为123456, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateAdminPassword({ adminId: row.id }).then(res => {
          this.$message({
            message: '密码重置成功',
            type: 'success',
            duration: 3 * 1000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.el-table th.gutter {
  display: table-cell !important;
}
.el-table td.is-center {
  top: 1px !important;
}
</style>
